<template>
  <view class="container">
    <view class="head mb-30">
      <view class="tabs flex align-end">
        <view
          class="item w-50 flex justify-center align-center sel"
          :class="current === index ? item.style1 : item.style2"
          v-for="(item, index) in tabList"
          :key="item.id"
          @click="onTabs(index)"
        >
          <image class="width-30 height-30" :src="current === index ? item.icon2 : item.icon1"></image>
          <text class="ml-10">{{ item.name }}</text>
        </view>
      </view>
      <view class="bg-white border-radius-br-10 border-radius-bl-10 padding-30 height-148">
        <view class="flex" v-if="current === 0">
          <view class="w-50 flex justify-between">
            <view>
              <view class="fsize-32 fweigh-600">堂食台号</view>
              <view class="fsize-22 line-gray mt-10">餐品将送至您的餐台</view>
            </view>
            <view style="border-right: 1px #ededed solid; width: 1px"></view>
          </view>
          <view class="w-50 flex justify-between align-center">
            <text class="w-100 fsize-70 text-align-center fweigh-600">#{{ stock.deskNumber }}</text>
            <image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
          </view>
        </view>
        <view class="" v-if="current === 1">
          <view class="flex align-center">
            <text class="fsize-28 fweigh-600">{{ stock.storeName }}</text>
            <image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
          </view>
          <view class="mt-10 fsize-24 line-gray">{{ stock.address }}</view>
        </view>
      </view>
    </view>
    <view class="mb-30 bg-white border-radius-10">
      <view class="padding-30" v-for="(item, index) in cart" :key="item.id">
        <view class="flex w-100">
          <image class="width-88 height-88 shrink0 mr-10" :src="item.FPic"></image>
          <view class="w-100 flex justify-between">
            <view class="w-100">
              <view class="fsize-28">{{ item.FName }}</view>
              <view class="fsize-24 line-gray">{{ item.FSpec }} {{ item.FeedTasteNames }}</view>
            </view>
            <view class="flex flex-column justify-between shrink0 ml-10 text-align-right">
              <view>
                <text class="fsize-20">￥</text>
                <text class="fsize-28">{{ item.FPosPrice }}</text>
              </view>
              <text class="fsize-26 line-gray">x{{ item.number }}</text>
            </view>
          </view>
        </view>
      </view>
      <list-cell last>
        <view class="w-100 flex justify-between">
          <text class="fsize-28">优惠卷</text>
          <view class="flex align-center" @click="$u.route('/pages/user/coupon/coupon', { tickets: JSON.stringify(coupons) })">
            <text v-if="!coupon.id" class="fsize-24 line-gray">{{ coupons.length > 0 ? coupons.length + '张' : '暂无可用' }}</text>
            <text v-else class="fsize-24 line-red">-￥{{ coupon.reduceAmount }}</text>
            <image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
          </view>
        </view>
      </list-cell>
      <list-cell last>
        <view class="w-100 flex justify-end align-center fsize-26">
          <text class="">共{{ cartNum }}件商品，合计</text>
          <view class="fweigh-600">
            <text class="fsize-30">￥</text>
            <text class="fsize-40">{{ cartAmount.toFixed(2) }}</text>
          </view>
        </view>
      </list-cell>
    </view>
    <view class="">
      <list-cell last radius>
        <view class="w-100 flex justify-between align-center">
          <text class="fsize-28">备注</text>
          <view class="flex align-center">
            <text class="fsize-24 mr-10">--</text>
            <image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
          </view>
        </view>
      </list-cell>
    </view>
    <view class="footer" :style="">
      <view class="">
        <text>应付：</text>
        <text class="fweigh-600">
          <text class="fsize-30">￥</text>
          <text class="fsize-40">{{ cartAmount.toFixed(2) }}</text>
        </text>
      </view>
      <button type="primary" @click="createOrder">立即支付</button>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import listCell from '@/components/list-cell/list-cell.vue';
// import { requestPayment } from '@/utils/payment'
import { pay } from '@/common/util.js';
export default {
  components: {
    listCell
  },
  data() {
    return {
      current: 0,
      FType: 1,
      timer: null,
      tabList: [
        {
          id: 1,
          name: '堂食',
          icon1: '../../static/images/pay/ts-s.png',
          icon2: '../../static/images/pay/ts.png',
          style1: 'sel',
          style2: 'nosel'
        },
        {
          id: 2,
          name: '外带',
          icon1: '../../static/images/pay/dd-s.png',
          icon2: '../../static/images/pay/dd.png',
          style1: 'ser',
          style2: 'noser'
        }
      ],
      cart: [],
      coupons: [],
      coupon: {
        id: 0,
        reduceAmount: 0
      }
    };
  },
  computed: {
    ...mapState(['stock', 'orderType']),
    cartNum() {
      return this.cart.reduce((acc, cur) => acc + cur.number, 0);
    },
    cartAmount() {
      return this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0) - this.coupon.reduceAmount;
    },
    remark() {
      return this.$store.state.remark;
    }
  },
  onShow() {
    this.getCat();
    this.FType = this.orderType;
    this.current = this.FType === 1 ? 0 : 1;
    uni.$on('isRefresh', (data) => {
      this.coupon = data;
    });
  },
  onUnload() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
    uni.$off('isRefresh');
  },
  methods: {
    getCat() {
      this.$api.GetShoppingCart().then((res) => {
        this.cart =
          res.data.length === 0
            ? []
            : res.data.map((im) => {
                return {
                  FItemID: im.fSubItemID,
                  FFoodID: im.fFoodID,
                  FName: im.fName,
                  FPosPrice: im.fPosPrice,
                  number: im.fQty,
                  FPic: im.fProImage,
                  FSpec: im.fSpec,
                  FFoodSpecID: im.fFoodSpecID,
                  FRemark: im.fRemark,
                  FeedTasteNames: im.feedTasteNames,
                  FShoppingCartID: im.fShoppingCartID || 0,
                  feed_ids: im.feedData.length > 0 ? im.feedData.map((jm) => jm.fFeedID) : [],
                  tast_ids: im.tastData.length > 0 ? im.tastData.map((jm) => jm.fTastID) : []
                };
              });
        this.getFoodCartShopCouponList();
      });
    },
    onTabs(ix) {
      if (this.current !== ix) {
        this.current = ix;
        if (ix === 0) {
          this.FType = 1;
        } else {
          this.FType = 2;
        }
      }
    },
    createOrder() {
      let _this = this;
      _this.$api
        .SubmitOrder({
          FType: _this.FType,
          FDeskID: _this.stock.deskId,
          FCouponID: _this.coupon.id,
          reduceAmount: _this.coupon.reduceAmount
        })
        .then((res) => {
          pay(res.data.orderId);
          // _this.$api.OrderPay({ids: res.data.orderId, payment_code: 'wechatpay', payment_type:17,params:{}}).then(respay=>{
          // 	const params = respay.data.respData
          // 	// 天厥收银台支付
          // 	uni.openEmbeddedMiniProgram({
          // 		appId: params.appId,
          // 		path: params.path,
          // 		success(res) {
          // 打开成功
          // _this.onToast('调取支付成功!')
          // uni.switchTab({
          // 	url: '/pages/tab_bar/order/order'
          // });
          // 	}
          // })

          // uni.requestPayment({
          // 	provider: 'wxpay',
          // 	timeStamp: params.payTimeStamp,
          // 	nonceStr: params.paynonceStr,
          // 	package: params.payPackage,
          // 	signType: params.paySignType,
          // 	paySign: params.paySign,
          // 	success: function(sucs) {
          // 		_this.onToast('支付成功')
          // 	},
          // 	fail: function(fail) {
          // 		if(fail.errMsg === 'requestPayment:fail cancel'){
          // 			_this.onToast('已取消支付')
          // 		}else {
          // 			_this.onToast(fail.errMsg)
          // 		}
          // 	},
          // })
          // })
        });
    },
    onToast(msg) {
      this.$refs.uToast.show({
        message: msg,
        complete() {
          uni.switchTab({
            url: '/pages/tab_bar/order/order'
          });
        }
      });
    },
    getFoodCartShopCouponList() {
      this.$api.GetFoodCartShopCouponList({ channelValue: this.FType + 1 }).then((res) => {
        this.coupons = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: auto;
  padding: 0 30rpx 120rpx 30rpx;
  .head {
    .tabs {
      .sel {
        height: 84rpx;
        background: #fff;
        font-weight: 600;
        color: #111;
        border-radius: 10rpx 30rpx 0rpx 0rpx;
      }
      .ser {
        height: 84rpx;
        background: #fff;
        font-weight: 600;
        color: #111;
        border-radius: 30rpx 10rpx 0rpx 0rpx;
      }
      .nosel {
        height: 74rpx;
        color: #666;
        background: #ededed;
        border-radius: 10rpx 0 0 0;
      }
      .noser {
        height: 74rpx;
        color: #666;
        background: #ededed;
        border-radius: 0 10rpx 0 0;
      }
    }
  }
}

.footer {
  background-color: #ffffff;
  z-index: 10;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 30rpx 60rpx 30rpx;

  button {
    text-align: center;
    padding: 0;
    line-height: 90rpx;
    color: #111111;
    font-size: 30rpx;
    width: 280rpx;
    height: 90rpx;
    font-weight: bold;
    background: linear-gradient(34deg, #f3c45d, #edac2f);
    border-radius: 45rpx;
    margin: 0;
  }
}
</style>
